<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>css-3d旋转相册</title>
		<link rel="stylesheet" href="css/hovertree.css" />
		<script src="./css/iconfont.js"></script>
		<style>
			.icon {
			  width: 1em;
			  height: 1em;
			  vertical-align: -0.15em;
			  fill: currentColor;
			  overflow: hidden;
			}
			.button {
				position: fixed;
				right: 10px;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="button" onclick="play()">
			<span>
				<svg class="icon play_view_false" aria-hidden="true">
				  <use xlink:href="#icon-bofang"></use>
				</svg>
				<svg class="icon play_view_true" aria-hidden="true">
				  <use xlink:href="#icon-zanting"></use>
				</svg>
			</span>
			音乐
		</div>
		<div class="hovertreeinfo">
			<h2></h2>
		</div>
		<!-- 仅自动播放音乐 -->
		<audio loop src="img/qianyuqianxun.mp3" id="audio" preload="auto">该浏览器不支持audio属性</audio>
		<script type="text/javascript">
			var playing = false;
			var audio = document.getElementById('audio');
			var playFalse = document.querySelector('.play_view_false');
			var playTrue = document.querySelector('.play_view_true');
			playTrue.style.display = 'none';
			function play() {
				if (playing) {
					audio.pause()
					playing = false;
					playTrue.style.display = 'none';
					playFalse.style.display = 'inline-block';
				} else {
					audio.play();
					playing = true;
					playFalse.style.display = 'none';
					playTrue.style.display = 'inline-block';
				}
			}
			
		</script>

		<!--/*外层最大容器*/-->
		<div class="wrap">
			<!--	/*包裹所有元素的容器*/-->
			<div class="cube">
				<!--前面图片 -->
				<div class="out_front">
					<img src="img/img01.jpg " class="pic" />
				</div>
				<!--后面图片 -->
				<div class="out_back">
					<img src="img/img02.jpg" class="pic"/>
				</div>
				<!--左图片 -->
				<div class="out_left">
					<img src="img/img03.jpg" class="pic" />
				</div>
				<div class="out_right">
					<img src="img/img04.jpg" class="pic" />
				</div>
				<div class="out_top">
					<img src="img/img05.jpg" class="pic" />
				</div>
				<div class="out_bottom">
					<img src="img/img06.jpg" class="pic" />
				</div>
				<!--小正方体 -->
				<span class="in_front">
					<img src="img/img07.jpg" class="in_pic" />
				</span>
				<span class="in_back">
					<img src="img/img08.jpg" class="in_pic" />
				</span>
				<span class="in_left">
					<img src="img/img09.jpg" class="in_pic" />
				</span>
				<span class="in_right">
					<img src="img/img10.jpg" class="in_pic" />
				</span>
				<span class="in_top">
					<img src="img/img11.jpg" class="in_pic" />
				</span>
				<span class="in_bottom">
					<img src="img/img12.jpg" class="in_pic" />
				</span>
			</div>
		</div>

		<script>
			document.querySelector('.wrap').onclick = function () {
				this.classList.toggle('phone_tap')
			}
		</script>
	</body>
</html>
